<template>
	<view class="page personal-info-page show">

		<view class="page-content">
			<view class="info-item">
				<text class="info-label">姓名</text>
				<text class="info-value">{{userInfo.account}}</text>
			</view>
			<view class="info-item">
				<text class="info-label">身份证号</text>
				<text class="info-value">{{userInfo.cardNo}}</text>
			</view>
			<view class="info-item">
				<text class="info-label">邮箱</text>
				<u-input :readonly='true' v-model="userInfo.email" inputAlign='right'>
					<u-icon slot="suffix" name="edit-pen" color="#2979ff" size="28"
						@click="showEditModal=true;modalType='email'"></u-icon>
				</u-input>
			</view>
			<view class="info-item">
				<text class="info-label">手机号</text>
				<u-input :readonly='true' v-model="userInfo.phone" inputAlign='right'>
					<u-icon slot="suffix" name="edit-pen" color="#2979ff" size="28"
						@click="showEditModal=true;modalType='telephone'"></u-icon>
				</u-input>
			</view>
			<view class="info-item clickable" @click="goChangePasswordPage">
				<text class="info-label">修改密码</text>
				<u-icon name="arrow-right" size="20"></u-icon>
			</view>
		</view>
		<u-modal ref="editModal" title="修改个人信息" :show="showEditModal" :mask-close-able="false" :showCancelButton='true'
			 @cancel='showEditModal=false' @confirm="confirm" :close-on-click-modal="false">
			<u-form :model="editData" ref="loginForm" labelWidth="80" labelAlign="right" :borderBottom="true">
				<!-- 邮箱输入框 -->
				<u-form-item label="邮箱" v-if="modalType=='email'" borderBottom>
					<u-input v-model="editData.email" placeholder="请输入邮箱"></u-input>
				</u-form-item>
				<!-- 手机号输入框 -->
				<u-form-item label="手机号" v-if="modalType=='telephone'" borderBottom>
					<u-input v-model="editData.account" placeholder="请输入手机号"></u-input>
				</u-form-item>

				<!-- 验证码输入框和按钮 -->
				<u-form-item label="验证码" v-if="modalType=='telephone'" borderBottom>
					<u-input v-model="editData.randNum" placeholder="请输入验证码">
						<template slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
							<u-button @tap="getPicFun" :text="tips" type="success" size="mini"></u-button>
						</template>
					</u-input>
				</u-form-item>

			</u-form>
		</u-modal>
		<slider-captcha v-show="isSliderShow" :frontimg="picObj.slidingImage" :backimg="picObj.backImage"
			:yHeight="picObj.yHeight" :maskclose="true" :randNum="telRandom" @onRefresh="getPicFun" @onSuccess="getCode"
			@onClose="handClose" @onMoveEnd="handleSliderMoveEnd" />
	</view>
</template>

<script>
	import SliderCaptcha from '@/pages/compoents/slideVue.vue';
	import {
		getPic,
		checkcapcode,
		postSend
	} from '@/api/api.js'
	import {
		updateAccount,
		updateAccountEmail
	} from '@/api/profileApi.js'
	export default {
		components: {
			SliderCaptcha
		},
		data() {
			return {
				modalType: 'email',
				isSliderShow: false,
				picObj: {
					slidingImage: '',
					backImage: '',
					capcode: '',
					yHeight: 0
				},
				telRandom: 0, //请求验证码的随机码
				tips: '',
				editData: {
					email: '',
					account: '',
					randNum: ''
				},
				showEditModal: false,
				userInfo: {
					account: '',
					cardNo: '',
					isIdentification: 0,
					isTransProvincial: '0',
					phone: '',
					userState: '',
					email: ''
				},
			};
		},
		onLoad() {
			uni.$on('userInfo', (data) => {
				console.log('userInfo', data);
				this.userInfo = {
					...data
				}
				// this.companyObj = data
			})
		},
		methods: {
			async getPicFun() {
				if (this.editData.account == '') {
					return uni.$u.toast('请输入手机号');
				}
				if (!this.$refs.uCode.canGetCode) {
					return uni.$u.toast('倒计时结束后再发送');
				}
				try {
					uni.showLoading({
						title: '加载中'
					})
					const res = await getPic(this.editData.account)
					console.log('222', res)
					if (res.data.result == 0) {
						this.picObj = {
							...res.data,
							backImage: 'data:image/png;base64,' + res.data.backImage,
							slidingImage: 'data:image/png;base64,' + res.data.slidingImage
						}
						this.telRandom = 0 // 打开前重置
						this.isSliderShow = true
						this.showEditModal=false
						uni.hideLoading()
					} else {
						uni.hideLoading()
						uni.$u.toast(res.data.message || '获取验证码失败！');
					}
				} catch (error) {
					uni.hideLoading()
					uni.$u.toast(res.data.message || '获取验证码失败！');
				}
			},
			async handleSliderMoveEnd(moveX) {
				try {
					const res = await checkcapcode({
						xpos: moveX,
						capcode: this.picObj.capcode,
						mobile: this.editData.account
					})
					if (res.data.result == 0) {
						this.telRandom = res.data.randNum
					} else {
						this.telRandom = Math.floor(Math.random() * 1000)
						uni.$u.toast(res.data.message || '验证失败！');
					}
				} catch (error) {
					this.telRandom = Math.floor(Math.random() * 1000)
					uni.$u.toast(res.data.message || '验证失败！');
				}
			},
			async getCode() {
				this.showEditModal=true
				this.isSliderShow = false
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				})
				try {
					const res = await postSend(this.editData.account, this.telRandom)
					if (res.data.result == 0) {
						uni.hideLoading();
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					} else {
						uni.hideLoading();
						uni.$u.toast(res.data.message || '发送短信失败！');
					}
				} catch (error) {
					uni.$u.toast(res.data.message || '发送短信失败！');
				}
			},
			handClose() {
				this.isSliderShow = false
			},
			codeChange(text) {
				this.tips = text;
			},
			async confirm() {
				if (this.modalType == 'email') {
					// 邮箱正则表达式（通用规则：支持字母、数字、常见符号及多级域名）
					const emailReg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
					if (this.editData.email == '') {
						return uni.$u.toast('请输入邮箱');
					}
					if(!emailReg.test(this.editData.email)){
						return uni.$u.toast('请输入正确的邮箱地址');
					}
					uni.showLoading({
						title: '修改中'
					})
					const res=await updateAccountEmail({
						email:this.editData.email
					})
					if(res.result==0){
						this.userInfo.email=this.editData.email
						uni.hideLoading();
						this.showEditModal = false;
						return uni.$u.toast('修改成功');
					}else{
						uni.hideLoading();
						return uni.$u.toast(res.message||'修改失败');
					}
					return
				}
				if (this.editData.account == '') {
					return uni.$u.toast('请输入手机号');
				}
				if (this.editData.randNum == '') {
					return uni.$u.toast('请输入验证码');
				}
				uni.showLoading({
					title: '修改中'
				})
				const res=await updateAccount({
					telephone:this.editData.account,
					randNum:this.editData.randNum
				})
				if(res.result==0){
					this.userInfo.account=this.editData.account.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2");
					uni.hideLoading();
					this.showEditModal = false;
					return uni.$u.toast('修改成功');
				}else{
					uni.hideLoading();
					return uni.$u.toast(res.message||'修改失败');
				}
				
			},
			goChangePasswordPage() {
				uni.navigateTo({
					url: '/pages/profile/changePasswordPage'
				})
			}
		}
	};
</script>

<style>
	@import 'index.css'
</style>